<template>
    <div class="layout">
        <div class="nav">
            <el-select
                v-model="term"
                placeholder="请选择学期"
                size="large"
                @change="change"
            >
                <el-option
                    v-for="item in tremOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <el-select
                v-model="type"
                placeholder="请选择类型"
                size="large"
                @change="change"
            >
                <el-option
                    v-for="item in typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="content">
            <ul
                v-infinite-scroll="load"
                class="content-list"
                :infinite-scroll-distance="10"
                :infinite-scroll-immediate="true"
                :infinite-scroll-disabled="disabled"
            >
                <li
                    v-for="i in leaveList"
                    :key="i"
                    @click="toDetail(i.leaveId, i.leaveType)"
                >
                    <div class="info">
                        <span class="header" v-if="i.leaveType == 1"
                            >请假申请</span
                        >
                        <span class="header" v-else-if="i.leaveType == 2"
                            >放行条申请</span
                        >
                        <span class="header" v-else-if="i.leaveType == 4"
                            >留宿申请</span
                        >
                        <span>{{ i.createTime }}</span>
                    </div>
                    <span
                        v-if="i.state == 16 || i.state == 22 || i.state === 4"
                    >
                        已通过
                    </span>
                    <span v-else-if="i.state === 1 || i.state === 0">
                        待审批
                    </span>
                    <span v-else-if="i.state === 15"> 未通过 </span>
                    <span v-else-if="i.state === 5">
                        家长已通过,班主任审核中
                    </span>
                    <span v-else-if="i.state === 3"> 已拒绝 </span>
                </li>
                <div
                    v-loading="loading"
                    v-if="loading"
                    style="
                        width: 40rem;
                        height: 40rem;
                        margin-top: 25rem;
                        background: #f7f7f7;
                    "
                ></div>
                <p
                    style="
                        margin-top: 10rem;
                        margin-bottom: 10rem;
                        font-size: 12rem;
                        color: #333;
                    "
                    v-show="noMore"
                >
                    没有数据了
                </p>
            </ul>
        </div>
        s
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { reqAllLeave } from '@/api/parent/index';
import { useParentStore } from '@/stores/modules/parentStore.js';
import { useRouter } from 'vue-router';

const router = useRouter();
const parentStore = useParentStore();
const tremOptions = ref([]);
const typeOptions = ref([]);
const startYear = +parentStore.studentNum.substring(0, 4);
const term = ref();
const type = ref();
const leaveList = ref([]);

let count = 1;

// 切换后加载状态重置
const reset = () => {
    count = 1;
    leaveList.value = [];
    loading.value = false;
    noMore.value = false;
};

const change = () => {
    reset();
    load();
};

const load = async () => {
    loading.value = true;
    const date = {
        start: term.value.split('-')[0],
        end: term.value.split('-')[1]
    };
    const str = `createTimeStart=${date.start}&createTimeEnd=${date.end}${
        type.value
    }&pageNo=${count}&pageSize=${6}`;
    count++;
    try {
        const res = await reqAllLeave(str);
        if (res.status === '200') {
            leaveList.value.push(...res.dataList);
            loading.value = false;
            console.log(res.dataList);
            noMore.value = res.dataList.length <= 3;
        }
    } catch (err) {
        console.log(err);
    }
};

const loading = ref(false);
const noMore = ref(false);
const disabled = computed(() => loading.value || noMore.value);

const toDetail = (id, type) => {
    switch (type) {
        case 1:
            router.push({ name: 'detail-leave', params: { id } });
            break;
        case 4:
            router.push({ name: 'detail-stay', params: { id } });
            break;
        default:
            break;
    }
};

onMounted(() => {
    const now = new Date();
    for (let y = startYear; y < startYear + 5; y++) {
        if (y <= now.getFullYear()) {
            if (now.getMonth() + 1 >= 2) {
                tremOptions.value.push({
                    label: `${y}~${y + 1}第一学期`,
                    value: `${y}/9/01-${y + 1}/1/10`
                });
            }
            if (now.getMonth() + 1 >= 9) {
                tremOptions.value.push({
                    label: `${y}~${y + 1}第二学期`,
                    value: `${y + 1}/2/23-${y + 1}/7/1`
                });
            }
        }
    }
    typeOptions.value = [
        {
            label: '全部',
            value: '&states=5&states=15&states=16&states=17&states=21&states=22&states=23&states=27&states=28&states=1&states=3'
        },
        {
            label: '审核通过',
            value: '&states=5&states=15&states=16&states=17&states=21&states=22&states=23&states=27&states=28'
        },
        {
            label: '审核未通过',
            value: '&states=3'
        },
        {
            label: '待审核',
            value: '&states=1'
        }
    ];
    term.value = tremOptions.value[0].value;
    type.value = typeOptions.value[0].value;
});
</script>

<style scoped lang="scss">
.layout {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #f7f7f7;
    .nav {
        width: 100vw;
        height: 70rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .content {
        background-color: #f7f7f7;
        width: 100%;
        height: 90%;
        .content-list {
            width: 100%;
            height: 100%;
            align-self: start;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-content: flex-start;
            overflow: auto;
            > li {
                width: 100%;
                height: 10%;
                border-bottom: #ddd 1px solid;
                font-size: 15rem;
                display: flex;
                justify-content: space-between;
                color: #555;
                > div {
                    margin-left: 10rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    .header {
                        font-weight: bold;
                    }
                }
                > span {
                    margin-right: 10rem;
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
}
</style>
